import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, Button, Timeline, Pagination, Spin } from 'antd';
import moment from 'moment';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';

@connect(({ protocol: { history }, loading }) => ({
  history,
  loading: loading.effects['protocol/fetchHistory'],
  suppProtId: '',
}))
class BasicProfile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      suppProtId: '',
    };
  }

  componentDidMount() {
    const {
      location: { query },
    } = this.props;
    const { suppProtId } = query;
    this.setState({ suppProtId }, () => {
      this.handleSearch();
    });
  }

  // 查询列表
  handleSearch = e => {
    if (e) e.preventDefault();
    const {
      dispatch,
      history: {
        pagination: { current, pageSize },
      },
    } = this.props;
    const { suppProtId } = this.state;
    const pagerArg = { currentPage: current, pageSizes: pageSize };
    const values = {
      suppProtId,
      pagerArg,
    };
    dispatch({
      type: 'protocol/fetchHistory',
      payload: values,
    });
  };

  // 分页切换
  handleStandardTableChange = (current, pageSize) => {
    const { dispatch } = this.props;
    const { suppProtId } = this.state;
    const pagerArg = {
      currentPage: current,
      pageSizes: pageSize,
    };
    const params = {
      suppProtId,
      pagerArg,
    };
    dispatch({
      type: 'protocol/fetchHistory',
      payload: params,
    });
  };

  render() {
    const {
      loading,
      history: {
        list,
        pagination: { current, pageSize, total },
      },
    } = this.props;
    const pagination = {
      style: { textAlign: 'center', paddingTop: 20 },
      defaultCurrent: 1, // 默认当前页
      defaultPageSize: 10, // 默认单页条数
      current, // 当前页
      pageSize, // 单页条数
      total,
      showQuickJumper: true, // 跳转至某页
      showSizeChanger: true, // 是否可以改变 pageSize
      onChange: (page, size) => {
        // 页码改变的回调
        this.handleStandardTableChange(page, size);
      },
      onShowSizeChange: (page, size) => {
        // 单页条数变化的回调
        this.handleStandardTableChange(page, size);
      },
      showTotal: () => {
        const totalPage = total < pagination.pageSize ? 1 : Math.ceil(total / pagination.pageSize);
        return `共 ${total} 条记录 第 ${current} / ${totalPage}页`;
      },
    };
    return (
      <PageHeaderWrapper>
        <Card
          title={<span style={{ fontWeight: 'bolder' }}>历史记录</span>}
          style={{ marginBottom: 24 }}
          bordered={false}
        >
          <Spin tip="Loading..." spinning={loading}>
            <Timeline>
              {list.map(item => (
                <Timeline.Item key={item.suppProtHisId}>
                  <p>
                    {moment(item.creTime).format('YYYY-MM-DD HH:mm')}
                    <span style={{ marginLeft: 30 }}>{item.creName}</span>
                  </p>
                  <p>{item.remark}</p>
                </Timeline.Item>
              ))}
            </Timeline>
            <Pagination {...pagination} />
          </Spin>
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button type="primary" onClick={() => window.history.back()}>
            {' '}
            关闭
          </Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}

export default BasicProfile;
